<template>

	<view class="detailed_give">
		<view class="top">
			<view>
				<view class="name">
					账户可用余额:
				</view>
				<view>
					<span class="tip"></span>
					<span class="name_money">	{{
							(userInfo && userInfo.account && userInfo.account.gold) ||
								'0'
						}}</span>
				</view>
			</view>
			<view class="his"  @tap="navToLogin('/pages/user/account/gold/givelog')">
				转赠记录
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="input-box">
			<view class="title">
				请输入转赠对象ID号
			</view>
			<view class="input">
				<span>账号</span>
				<input class="uni-input" v-model="mobile" focus placeholder="请输入转赠对象ID号" />
			</view>
			<view style="height: 15upx;"></view>
			<view class="input">
				<span>金额</span>
				<input class="uni-input" v-model="value" focus placeholder="请输入转赠金额" />
			</view>
		</view>
		<view class="btn" @click="giveFun" :disabled="loading" style="color:#fff">
			立即转赠
		</view>
		<view class="rule">
			<u-icon @click="checkRule" :color="check?'#FF3232':''" size="20px" name="checkmark-circle"></u-icon>
			<span>勾选即代表同意转赠规则协议</span>
		</view>


		<jp-pwd ref="jpPwds" @completed="completed" @inputPwd="inputPwd" @forget="forget" :money="pwd.money" :payType="pwd.payType"
		 :keyType="pwd.keyType" :pawType="pwd.pawType" :tite="pwd.tite" :contents="pwd.contents" :cancelType="pwd.cancelType"
		 :keep="pwd.keep" :msg="pwd.msg" :places="pwd.places" contentsColor="#555" :keyImg="keyImg" :topImg="topImg" :isPwy="pwd.isPwy"
		 titeColor="#333"></jp-pwd>

		<!--加载动画-->
		<loading isFullScreen :active="loading"></loading>

	</view>
</template>

<script>
	const API = require('@/utils/api/tyOrder.js').default;
	const $ = require('@/utils/api.js');
	const state = require('@/utils/api/state.js').default;
		import logistics from '@/components/common/logistics.vue';
		import payItem from '@/components/common/payitem';
	let self;
	// import {
	// 	exchange,
	// 	transfer
	// } from '@/api/exchange';
	export default {
		components: {
			// jpPwd
		},
		data() {
			return {
						loading: false,
						code: '',
						keyImg: '',
						topImg: '',
						pwd: {
							money: null, //支付金额
							payType: 'one', //支付样式  one two
							keyType: 'one', //键盘样式  one two
							pawType: 'one', //输入框样式  one two
							tite: '请输入支付密码', //标题
							contents: '', //提示
							cancelType: false, //是否输入完密码后消失
							keep: false, //点击遮挡是否关闭
							msg: '', // 密码错误提示语
							places: 6,
							isPwy: true
						},
						paypwd:'',
				value: '',
				colorData: "#FF3232",
				check: true,
				mobile: ""
			}
		},
		onLoad() {

			this.initData();
		},
		methods: {

			toOpen(payType, keyType, pawType, img1, img2) {
						this.pwd.isPwy = true
						this.topImg = img1 || ''
						this.keyImg = img2 || ''
						this.pwd.payType = payType
						this.pwd.keyType = keyType
						this.pwd.pawType = pawType
						this.pwd.places = 6
						this.$refs.jpPwds.toOpen()
					},
					completed(e) {
							// if (e == '123456') {
								this.$refs.jpPwds.toCancel()
								//提交数据code
								this.paypwd = e;
			          this.giveFun()
						},
			navToLogin(route) {
				// console.log("111")
				// 		console.log(route)
				this.$mRouter.push({
					route
				});
			},
			initData() {
				this.userInfo = uni.getStorageSync('userInfo') || undefined;
				this.getMemberInfo();
			},
			async getMemberInfo() {
				await this.$http
					.get(memberInfo)
					.then(async r => {
						this.loading = false;
						this.userInfo = r.data;
					})
					.catch(() => {
						this.loading = false;
					});
			},
			checkRule() {
				this.check = !this.check
			},
			giveFun() {



					if (!this.paypwd) {
						this.toOpen('two', 'two', 'one');
						return;
					}


				if (this.mobile.trim() == "") {
					uni.showToast({
						title: '请输入转赠对象ID号',
						icon: "none"
					})
					return
				}
				if (this.value.trim() == "") {
					uni.showToast({
						title: '请输入转赠金额',
						icon: "none"
					})
					return
				}

				this.loading = true;
				this.$http
					.post(`${transfer}`, {
						paypwd:this.paypwd,
						mobile: this.mobile,
						money: this.value
					})
					.then(res => {
						// this.proportion = r.data


			      this.loading = false;

							this.$mHelper.toast('已提交！5秒后自动刷新', 5000,true,'none');
							setTimeout(() => {
							 // this.$mRouter.reload();
									uni.redirectTo({
														url: `pages/user/account/gold/give`
								});
							}, 5000);






					})
					.catch((res) => {
						this.loading = false;
						if(res =='没有设置支付密码'){
								setTimeout(() => {
								 // this.$mRouter.reload();
										uni.redirectTo({
															url: `/pages/user/paypwd`
									});
								}, 1000);
								// this.toOpen('two','two','one');
						}else if(res =='请输入支付密码'){
								this.toOpen('two','two','one');
						}else if(res =='支付密码错误'){
								    this.pwd.msg =res;
								setTimeout(() => {
								   this.toOpen('two','two','one');
								}, 1000);
						}
					});
			}
		}
	}
</script>
<style>

	.detailed_give {
	  /* color: #fff; */
	  height: 100vh;
	  background-color: #F6F6F6;
	}
	.detailed_give .top {
		color:#ffffff;
	  width: 95%;
	  margin: 0 auto;
	  border-radius: 30upx;
	  padding: 55upx 40upx;
	  background-image: linear-gradient(to right, #FF3030, #FF7364);
	  display: flex;
	  align-items: center;
	  flex-direction: row;
	  justify-content: space-between;
	  margin-top: 40upx;
	}
	.detailed_give .top .name {
	  font-size: 40upx;
	}
	.detailed_give .top .tip {
	  font-size: 35upx;
	}
	.detailed_give .top .name_money {
	  font-size: 50upx;
	  font-weight: 600;
	}
	.detailed_give .input-box {
	  color: #000;
	  padding: 30upx;
	}
	.detailed_give .input-box .title {
	  font-size: 35upx;
	  padding: 0 0 15upx 0;
	}
	.detailed_give .input-box .input {
	  padding: 30upx 40upx;
	  background-color: #fff;
	  display: flex;
	  align-items: center;
	  font-size: 30upx;
	  border-radius: 20upx;
	  overflow: hidden;
	  color: #000;
	}
	.detailed_give .input-box .input span {
	  color: #999;
	  font-size: 35upx;
	  padding-right: 30upx;
	}
	.detailed_give .input-box .input .uni-input {
	  font-size: 35upx;
	  flex: 1;
	  text-align: right;
	}
	.detailed_give .btn {
	  width: 90%;
	  padding: 20upx 0;
	  margin: 0 auto;
	  margin-top: 30upx;
	  border-radius: 40upx;
	  font-size: 35upx;
	  text-align: center;
	  background-image: linear-gradient(to right, #FF3030, #FF7364);
	  margin-bottom: 20upx;
	}
	.detailed_give .rule {
	  color: #000;
	  font-size: 30upx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	.detailed_give .rule span {
	  margin-left: 10upx;
	}
</style>
